@{
    Layout = "_LayoutAndSidebar";
    @model lso_2u_Web应用开发.Models.Database.User
}

<style>
    .page {
        height: 100%;
        overflow: auto;
        margin-bottom: unset !important;
        box-sizing: border-box;
    }
</style>

<div class="box page">
    <div class="field">
        <label class="label">用户名</label>
        <div class="control has-icons-left has-icons-right">
            <input class="input" type="text" placeholder="输入新用户名" value="@Model.Name" id="input_name">
            <span class="icon is-small is-left">
                <i class="fas fa-user"></i>
            </span>
        </div>
    </div>

    <div class="field">
        <label class="label">
            手机号
        </label>
        <label class="checkbox">
            <input type="checkbox" id="checkbox_enable_edit_phone">
            <span>
                我需要修改手机号
            </span>
            <span class="icon-text has-text-warning">
                <span class="icon has-text-warning">
                    <i class="fas fa-exclamation-triangle"></i>
                </span>
                <span class="content is-small">错误的修改手机号可能导致无法登录, 如需修改请确保核对无误</span>
            </span>
        </label>

        <div class="control has-icons-left has-icons-right" id="input_phone_container">
            <input class="input" type="phone" placeholder="输入手机号" value="@Model.PhoneNumber" id="input_phone">
            <span class="icon is-small is-left">
                <i class="fas fa-phone"></i>
            </span>
        </div>
        <p class="help is-danger" id="input_phone_tip">此手机号不可用</p>
    </div>

    <div class="field is-grouped">
        <div class="control">
            <button class="button is-primary" id="submit">确认修改</button>
        </div>

    </div>
</div>
<script>
    let E_inputPhone = document.getElementById('input_phone');
    let E_inputPhoneTip = document.getElementById('input_phone_tip');

    let E_inputPhoneContainer = document.getElementById('input_phone_container');
    let E_enableEditPhone = document.getElementById('checkbox_enable_edit_phone');

    // 设置输入框的状态
    function inputStatus(inputElm, status) {
        inputElm.classList.remove('is-danger');
        inputElm.classList.remove('is-success');
        if (status == 'success') {
            inputElm.classList.add('is-success');
        } else if (status == 'danger') {
            inputElm.classList.add('is-danger');
        }
    }

    // 设置提示框的状态
    function tipStatus(tipElm, status, text) {
        tipElm.classList.remove('is-danger');
        tipElm.classList.remove('is-success');
        if (status == 'success') {
            tipElm.innerText = text;
            tipElm.classList.add('is-success');
        } else if (status == 'danger') {
            tipElm.innerText = text;
            tipElm.classList.add('is-danger');
        }
        tipElm.innerText = text;
    }

    function setInputStatus(inputElm, tipElm, status, text) {
        inputStatus(inputElm, status);
        tipStatus(tipElm, status, text);
    }

    // 更新手机号输入框与提示框的显示状态
    function updatePhoneEnable() {
        if (E_enableEditPhone.checked) {
            E_inputPhoneContainer.classList.remove('is-hidden');
            E_inputPhoneTip.classList.remove('is-hidden');
        } else {
            E_inputPhoneContainer.classList.add('is-hidden');
            E_inputPhoneTip.classList.add('is-hidden');
        }
    }

    function checkInputPhone() {
        let phone = E_inputPhone.value;
        let reg = /^1[3456789]\d{9}$/;
        if (!reg.test(phone)) {
            setInputStatus(E_inputPhone, E_inputPhoneTip, 'danger', '手机号格式错误');
            return false;
        }

        setInputStatus(E_inputPhone, E_inputPhoneTip, 'success', '你可以使用这个手机号');
        return true;
    }

    updatePhoneEnable();
    checkInputPhone();

    // 如果不需要修改手机号, 则隐藏手机号输入框与提示框
    E_enableEditPhone.addEventListener('change', function () {
        updatePhoneEnable();
    });

    E_inputPhone.addEventListener('input', function () {
        checkInputPhone();
    });

    $('#submit').click(function () {
        $('#submit').addClass('is-loading');
        let data = {}
        
        if (E_enableEditPhone.checked && checkInputPhone() == false) {
            alert('手机号格式错误');
            $('#submit').removeClass('is-loading');
            return;
        }

        let name = $('#input_name').val();
        let phone = $('#input_phone').val();
        data.name = name;
        if (E_enableEditPhone.checked) {
            data.phone = phone;
        }

        $.ajax({
            url: '/UserApi/EditInfo',
            type: 'POST',
            data: data,
            success: function (data) {
                if (data.code == 0) {
                    alert('修改成功');
                    window.location.reload();
                } else {
                    alert('修改失败: ' + data.msg);
                }
            },
            error: function (data) {
                alert('修改失败: ' + data.msg);
            },
            complete: function () {
                $('#submit').removeClass('is-loading');
            }
        });
        
    });


</script>
